<script lang="ts" setup>
import areaList from "../../components/area";

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
  },
  prefix: {
    type: String,
    default: "",
  },
  poolType: {
    type: Number,
  },
  type: {
    type: String,
  },
});

const emits = defineEmits([ "update:modelValue", "check" ]);

const form = ref({
  timeLimited: 0,
  dayStockLimited: 0,
  phoneLimit: 0,
  areaLimited: 0,
  timeLimitNum: 1,
});

const areaprops = {
  multiple: true,
  emitPath: false,
};

const detail = computed({
  get: () => {
    let update = false;
    let detail = Object.assign({}, form.value, props.modelValue);
    let keys = Object.keys(form.value);
    for (let i = 0; i < keys.length; i++) {
      if (props.modelValue[keys[i]] === undefined) {
        update = true;
        break;
      }
    }
    // 发货地编码格式化
    if (detail.areaCode && typeof detail.areaCode === "string") {
      update = true;
      detail.areaCode = detail.areaCode.split(",");
    }

    if (update) emits("update:modelValue", detail);

    return detail;
  },
  set: (val) => {
    emits("update:modelValue", val);
  },
});

const selectArea = computed(() => {
  let cityList = {};
  let areaCode = [];
  areaCode = detail.value.areaCode || [];
  areaCode.forEach((item: string) => {
    let cityCode = item.slice(0, 4);
    if (!cityList[cityCode]) cityList[cityCode] = cityCode;
  });
  return {
    cityNum: Object.keys(cityList).length,
    countyNum: areaCode.length,
  };
});

const onChange = () => {
  detail.value = detail.value;
};
</script>
<template>
  <el-form-item
    label="单日库存："
    :prop="`${prefix}dayStockLimited`"
  >
    <el-radio-group
      v-model="detail.dayStockLimited"
      @change="onChange"
    >
      <el-radio :label="0">
        不限
      </el-radio>
      <el-radio :label="1">
        限制
      </el-radio>
    </el-radio-group>
    <template v-if="detail.dayStockLimited == 1">
      <el-form-item
        label-width="10px"
        :prop="`${prefix}dayStockNum`"
        :rules="[
          { required: true, message: '请填写单日库存', trigger: 'blur' },
        ]"
      >
        <EasyNumberInput
          v-model="detail.dayStockNum"
          :min="1"
          :max="99999999"
          unit="件"
          :precision="0"
          @change="onChange"
        />
      </el-form-item>
    </template>
  </el-form-item>
  <el-form-item
    :label="poolType == 1 ? '奖品中奖次数：' : '奖品购买次数：'"
    :prop="`${prefix}timeLimited`"
  >
    <el-radio-group
      v-model="detail.timeLimited"
      @change="onChange"
    >
      <el-radio :label="0">
        不限
      </el-radio>
      <el-radio :label="1">
        限制
      </el-radio>
    </el-radio-group>
    <template v-if="detail.timeLimited == 1">
      <el-form-item
        label-width="10px"
        :prop="`${prefix}timeLimitNum`"
        :rules="[
          {
            required: true,
            message: `请输入最多${poolType == 1 ? '中奖' : '购买'}次数`,
            trigger: 'blur',
          },
        ]"
      >
        <EasyNumberInput
          v-model="detail.timeLimitNum"
          :min="1"
          :max="9999"
          unit="次"
          :precision="0"
          @change="onChange"
        />
      </el-form-item>
    </template>
  </el-form-item>
  <el-form-item
    v-if="type === 'recharge'"
    label="限定登录手机号:"
  >
    <el-switch
      v-model="detail.phoneLimit"
      inline-prompt
      active-text="是"
      inactive-text="否"
      :active-value="1"
      :inactive-value="0"
      @change="onChange"
    />
  </el-form-item>
  <el-form-item
    v-if="type === 'real'"
    label="发货地:"
  >
    <el-radio-group
      v-model="detail.areaLimited"
      @change="onChange"
    >
      <el-radio :label="0">
        不限
      </el-radio>
      <el-radio :label="1">
        限制
      </el-radio>
    </el-radio-group>
  </el-form-item>
  <template v-if="detail.areaLimited == 1">
    <el-form-item style="margin-bottom: 0">
      <div>
        已选
        <span class="mark-text">{{ selectArea.cityNum }}</span>
        个城市，<span class="mark-text">{{ selectArea.countyNum }}</span>
        个区域
      </div>
    </el-form-item>
    <el-form-item
      :prop="`${prefix}areaCode`"
      :rules="[{ required: true, message: '请选择发货地', trigger: 'change' }]"
    >
      <el-cascader-panel
        v-model="detail.areaCode"
        :options="areaList"
        :props="areaprops"
        @change="onChange"
      />
    </el-form-item>
  </template>
</template>
